<template>
  <div class="musicDetail">
    <div class="loding" v-if="ShowPage">
      <div class="backimg">
        <img :src="musicList.al.picUrl" alt="" class="auto-img" />
      </div>
      <div class="detailTop">
        <div class="detailLeft">
          <div class="backicon">
            <svg class="icon zanting" aria-hidden="true" @click="backHome">
              <use xlink:href="#icon-direction-left"></use>
            </svg>
          </div>
          <div class="author">
            <div class="song">
              <marquee class="ppp" behavior="" direction="">{{
                musicList.al.name
              }}</marquee>
              <p></p>
            </div>
            <div class="songer">
              <span v-for="(itemtwo, ind) in musicList.ar" :key="ind">
                {{ itemtwo.name }}</span
              >
              <svg class="icon zanting" aria-hidden="true">
                <use xlink:href="#icon-arrow-right-bold"></use>
              </svg>
            </div>
          </div>
        </div>
        <div class="detailRight">
          <svg class="icon zanting" aria-hidden="true">
            <use xlink:href="#icon-fenxiangyemian"></use>
          </svg>
        </div>
      </div>
      <div class="deContent" v-show="!isLyricshow">
        <div class="bofang">
          <img
            class="imgone"
            src="../../assets/imgs/needle-ab.png"
            alt=""
            :class="{ imgone_active: !isbtnShow }"
          />
          <img class="imgtwo" src="../../assets/imgs/cipan.png" alt="" />
          <img
            class="imgthree"
            @click="isLyricshow = true"
            :src="musicList.al.picUrl"
            alt=""
            :class="{ imgthree_active: !isbtnShow, img_ar_pauesd: isbtnShow }"
          />
        </div>
      </div>

      <div class="alllyr">
        <div class="musicLyric" ref="musicLyric" v-show="isLyricshow">
          <p
            :class="{
              active:
                currentTime * 1000 >= item.time &&
                currentTime * 1000 < item.pre,
            }"
            v-for="(item, index) in lyric"
            :key="'my-' + index"
          >
            {{ item.lrc }}
          </p>
        </div>
      </div>

      <!-- :class="{active: (currentTime *1000>=item.time && currentTime *1000< item.pre)}"  -->

      <!-- :class="{
          active:
          currentTime * 1000 >= item.time && currentTime * 1000 < item.pre,
        }"   -->

      <div class="detailfoot">
        <div class="footTop">
          <svg class="icon zanting" aria-hidden="true">
            <use xlink:href="#icon-fabulous"></use>
          </svg>
          <svg class="icon zanting" aria-hidden="true">
            <use xlink:href="#icon-bottom"></use>
          </svg>
          <svg class="icon zanting" aria-hidden="true">
            <use xlink:href="#icon-pinghengqi"></use>
          </svg>
          <svg class="icon zanting" aria-hidden="true">
            <use xlink:href="#icon-comment"></use>
          </svg>
          <svg class="icon zanting" aria-hidden="true">
            <use xlink:href="#icon-data-view"></use>
          </svg>
        </div>
        <div class="footerContent">
          <input
            type="range"
            class="range"
            min="0"
            :max="duration"
            step="0.05"
            v-model="currentTime"
          />

          <div class="footer">
            <svg class="icon zanting" aria-hidden="true">
              <use xlink:href="#icon-suijibofang"></use>
            </svg>
            <svg class="icon zanting" @click="goPlay(-1)" aria-hidden="true">
              <use xlink:href="#icon-shangyishouge"></use>
            </svg>

            <svg @click="play" class="icon" aria-hidden="true">
              <use
                :xlink:href="[isbtnShow ? '#icon-zanting2' : '#icon-bofang2']"
              ></use>
            </svg>

            <svg class="icon zanting" @click="goPlay(1)" aria-hidden="true">
              <use xlink:href="#icon-xiayishou"></use>
            </svg>
            <svg class="icon zanting" aria-hidden="true">
              <use xlink:href="#icon-bofanggedan"></use>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//<!-- currentAudioInfo.audioId === singerData.id && -->
//安装和引入走马灯效果
// import { fail } from 'assert';
import { Vue3Marquee } from "vue3-marquee";
import "vue3-marquee/dist/style.css";
import { mapMutations, mapState } from "vuex";
export default {
  name: "MusicDetail",
  data() {
    return {
      //是否显示歌词
      isLyricshow: false,
      ShowPage:false
    };
  },
  created(){
    this.ShowPage = true
  },
  computed: {
    ...mapState([
      "lyricList",
      "playListIndex",
      "currentTime",
      "playList",
      "duration",
    ]),
    //分割歌词
    lyric: function () {
      let arr;
      //拿到歌词在操作
      if (this.lyricList.lyric) {
        arr = this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
          //时间 赋值时间 其他页面也可能用到
          let min = item.slice(1, 3);
          let sec = item.slice(4, 6);
          let mill = item.slice(7, 10);
          let lrc = item.slice(11, item.length);
          //变成毫秒
          let time =
            parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
          // console.log(min,sec,Number(mill),lrc);
          console.log(min, sec, mill, lrc);
          //下一句歌词开始

          //只有两位数的时候
          if (isNaN(Number(mill))) {
            mill = item.slice(7, 9);
            lrc = item.slice(10, item.length);
            time = parseInt(min) * 60 * 1000 + parseInt(sec) * parseInt(mill);
          }
          //   console.log(min,sec,Number(mill),lrc);
          return { min, sec, mill, lrc, time };
        });
        arr.forEach((item, i) => {
          //最后一句了
          if (i === arr.length - 1 || isNaN(arr[i + 1].time)) {
            //对象里直接添加属性
            item.pre = 199990;
          } else {
            //下一句歌词的时间
            item.pre = arr[i + 1].time;
          }
        });
      }
      console.log(arr);
      return arr;
    },
  },
  methods: {
    //上下一首 加一或者减一
    goPlay: function (num) {
      let index = this.playListIndex + num;
      if (index < 0) {
        index = this.playList.length - 1;
      } else if (index == this.playList.length) {
        index = 0;
      }
      this.updatePlayListIndex(index);
    },
    backHome: function () {
      //点击箭头进来是磁盘 不是歌词

      this.isLyricshow = false;
      //箭头点击返回
      this.updateDetailShow();
      this.ShowPage = true
    },
    ...mapMutations(["updateDetailShow", "updatePlayListIndex"]),
  },
  watch: {
    
    //放歌的时候 这个currentTime一直在变
    currentTime: function (newValue) {
      let p = document.querySelector("p.active");
      //拿到之后在判断

      //判断字体距离顶部的距离
      // console.log([p]);
      if (p && p.offsetTop > 210) {
        this.$refs.musicLyric.scrollTop = p.offsetTop - 210;
      }

      if (newValue === this.duration) {
        if (this.playListIndex === this.playList.length - 1) {
          this.updatePlayListIndex(0);
          //默认歌曲的时候就会重复播放
          this.play();
        } else {
          this.updatePlayListIndex(this.playListIndex + 1);
        }
      }
      //歌词大盒子滚动条移动的距离.
      // console.log([ this.$refs.musicLyric]);
    },
  },
  mounted() {
    console.log("this.musicList传过来的参数==>", this.musicList);
    console.log("需要的歌词==>", this.lyricList.lyric);
    this.addDuration();
  },

  //父组件传值跟数据过来 使用父组件的方法 接收
  props: ["musicList", "isbtnShow", "play", "addDuration"],

  components: {
    // Vue3Marquee,
  },
};
</script>

<style lang="less" scoped>
.musicDetail {
  //    position: fixed;
  //    top: 0;
  //    left: 0;
  //    right: 0;
  //    bottom: 0;
  //    background-color: #ddd;
  /deep/ .van-popup {
    z-index: 2;
  }
  /deep/ .van-tabbar {
    z-index: -2;
  }

  .auto-img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    filter: blur(70px);
  }
  .detailTop {
    justify-content: space-between;
    align-items: center;
    display: flex;
    background-color: #c6bda9;
    .detailLeft {
      margin: 15px 0 15px 10px;
      align-items: center;
      display: flex;
      .backicon {
        margin-right: 10px;
      }
      .author {
        // width: 3rem;
        // height: 100%;
        .songer {
          margin-top: 5px;
          display: flex;
          align-items: center;
          justify-content: center;

          span {
            font-size: medium;
            font-weight: 600;
            color: #666666;
          }
          .icon {
            width: 15px;
            height: 15px;
            fill: #999;
          }
        }
        .song {
          .ppp {
            font-size: medium;
            font-weight: 800;
            color: #ede6e1;
            margin: 0;
          }

          p {
            font-size: medium;
            font-weight: 800;
            color: #ede6e1;
            margin: 0;
          }
        }
      }
    }
    .detailRight {
      margin: 15px 10px 15px 0px;
    }
  }
  .deContent {
    .bofang {
      width: 100%;
      height: 450px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      .imgone {
        width: 100px;
        height: 150px;
        position: absolute;
        left: 46%;
        //原点
        transform-origin: 0 0;
        //旋转
        transform: rotate(-15deg);
        transition: all 2s;
      }
      .imgone_active {
        width: 100px;
        height: 150px;
        position: absolute;
        left: 46%;
        //原点
        transform-origin: 0 0;
        //旋转
        transform: rotate(0deg);
        transition: all 2s;
      }

      .imgtwo {
        width: 250px;
        height: 250px;
        position: absolute;
        bottom: 115px;
        z-index: -1;
      }
      .imgthree {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        position: absolute;
        bottom: 157px;
        animation: rotate_ar 10s linear infinite;
      }

      @keyframes rotate_ar {
        0% {
          transform: rotateZ(0deg);
        }
        100% {
          transform: rotateZ(360deg);
        }
      }
      .imgthree_active {
        animation-play-state: running;
      }
      .img_ar_pauesd {
        animation-play-state: paused;
      }
    }
  }

  .alllyr {
    position: relative;
    // // top: 0;
    width: 100%;
    scroll-behavior: smooth;
    // height: 200px;
    overflow: scroll;
    // width: 100%;
    // height: 400px;
    // display: flex;
    // align-items: center;
    // flex-direction: column;
    // margin-top: 10px;
    overflow: scroll;
    .musicLyric {
      scroll-behavior: smooth;
      position: relative;
      width: 100%;
      height: 400px;
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-top: 10px;
      overflow: scroll;
      p {
        // font-weight: 600;
        // width: 100px;
        // overflow: hidden;
        // white-space: nowrap;

        text-overflow: ellipsis;
        margin-left: -100%;
        margin-right: -100%;
        text-align: center;

        // display: inline-block;
        // overflow: hidden;
        // text-align: initial;
        // white-space: nowrap;

        color: rgb(182, 181, 181);
        margin: 11px 30px;
        font-size: small;
      }
      .active {
        color: rgb(113, 82, 156);
        font-size: 16px;
      }
    }
  }
  .detailfoot {
    position: relative;
    // display: flex;
    // margin-bottom: 20px;
    .footTop {
      // position: absolute;
      position: fixed;
      bottom: 120px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .footerContent {
      margin-top: 20px;
      .range {
        position: fixed;
        bottom: 80px;
        width: 99%;
        height: 3px;
        // height: 70px;
      }
      .footer {
        position: fixed;
        width: 100%;
        bottom: 30px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .icon {
          width: 25px;
          height: 25px;
          font-size: larger;
        }
      }
    }
  }
}
</style>
